<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.7.1.min.js"></script>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
            block-size: border-box;
            background-color: #e8f6ff;
        }

        .ph img {
            width: 200px;
            height: 90px;
            text-align: center;
            /* margin: auto; */
            margin-left: 750px;
            margin-top: 30px;
        }

        .box {
            width: 700px;
            height: 500px;
            margin: 20px auto;
            background-color: white;
            position: relative;
            margin-top: 28px;
            border: 2px solid black;
            border-radius: 10px;
            padding: 10px;
            box-sizing: -20px 10px 1900px pink;
        }

        input[type="text"] {
            width: 650px;
            padding-left: 80px;
            font-size: 22px;
            line-height: 50px;
            border: none;
            /* outline: none; */
            border: 3px solid black;
            border-radius: 20px;
            background-color: white;
            margin: auto;
            margin-left: 478px;
        }

        .wz {
            width: 707px;
            height: 40px;
            background-color: white;
            border-bottom: 2px solid black;
            font-weight: 800;
            font-size: 17px;
            margin-top: 8px;
        }

        #all_sel {
            width: 50px;
            height: 50px;
            top: 75px;
            left: 15px;
            border: none;
            position: absolute;
        }

        .state {
            margin-top: 15px;
            height: 100px;
            color: black;
            font-weight: 600;
            width: 150px;
            /* background-color: white; */
        }

        .item:hover,
        .all:hover,
        .active:hover,
        .completed:hover,
        .clear:hover {
            /* border-radius: 20px; */
            /* border: 3px solid black; */
            background-color: #8cd4cb;
            width: 150px;
            height: 20px;
        }

        .con span {
            margin: 0 10px;
        }

        li {
            list-style: none;
            position: relative;
            height: 60px;
            padding: 0px 10px;
            line-height: 50px;
            background-color: #F9F3E5;
            border-bottom: 2px solid black;
            font-size: 20px;
            margin-top: 15px;
            vertical-align: text-top;
            border: 2px solid black;
            border-radius: 15px;
        }

        li input[type="checkbox"] {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }

        li button {
            width: 32px;
            height: 32px;
            position: absolute;
            top: 14px;
            right: 32px;
            border: none;
            border-radius: 12px;
            border: 2px solid black;
            font-size: 25px;
            /* background-color: white; */
            color: black;
        }

        .nav {
            width: 150px;
            height: 200px;
            float: right;
            margin-right: 270px;
            margin-top: -500px;
            text-align: center;
            border-radius: 20px;
            letter-spacing: 5px;
            /* background-color: rgb(176, 175, 177); */
            border-right: 6px solid black;
            border-top: 2px solid black;
            border-left: 2px solid black;
            border-bottom: 6px solid black;
        }

        /* .item {
            border-bottom: 2px solid black;
        }

        .con span {
            border-bottom: 2px solid black;
        }

        .xx {
            margin-top: 5px;
            border-bottom: 2px solid black;
            width: 150px;
        } */
        
    </style>
</head>

<body>
    <div class="ph">
        <img src="./todo (1).svg" alt="">
    </div>
    <input type="text" placeholder="新增待办事项...">
    <div class="box">
        <button id="all_sel"></button>

        <p class="wz">&emsp;&emsp;&emsp;今日事今日毕，勿将今事待明日!☕</p>
        <ul>

        </ul>
    </div>
    <div class="nav">
        <div class="state">
            <span class="xx">开✨</span>
            <p class="item"><span id="num"></span>未完成</p><br>
            <p class="con">
                <span class="all">所有</span><br>
                <span class="active">未完成</span><br>
                <span class="completed">已完成</span><br>
            </p>
            <p class="clear">清楚已完成</p><br>
        </div>
    </div>
    <script>
        $(function () {
            let user_data = localStorage.getItem("user")
            // 渲染
            apply()
            // 添加
            $("input[type='text']").on("keyup", addFun) 
            // 选中元素
            $("ul").on("change", "input[type='checkbox']", cheFun)  
            // 事件委托
            $(".state").on("click", fun)
            // 删除事件
            $("ul").on("click", "button", function () {
                objArr.splice($(this).attr("data-index"), 1)
                localStorage.setItem("objname", objArr.map(item => JSON.stringify(item)).join(";"))
                apply()
            })
        })

        let objArr = []

        // 数据
        function obj_data() {
            if (localStorage.getItem("objname")) {
                let arr = localStorage.getItem("objname").split(";")
                objArr = arr.map(item => JSON.parse(item))
            } else {
                objArr = [];
            }
            return objArr
        }

        // 页面渲染
        function apply(obj = obj_data()) {
            let text = ""
            obj.forEach((item, index) => {  
                text += `
        <li>
            <input type="checkbox" eleIndex="${index}"
            ${item.state ? "checked" : ""}>${item.content}
            <button data-index="${index}" id="shan">X</button>
        </li>
        `
            })
            $("ul").html(text)
            $("#num").text(obj.filter(item => item.state == false).length)  
        }

        // 添加
        function addFun(event) {  
            if (event.key === "Enter") { 
                let val = $(this).val().trim()  
                if (val) { 
                    let add_obj = {
                        state: false,
                        content: val,
                    }
                    objArr.push(add_obj)
                    localStorage.setItem("objname", objArr.map(item => JSON.stringify(item)).join(";"))
                    $(this).val("")
                    apply()
                }
            }
        }

        // 选中元素
        function cheFun() {
            let i = $(this).attr("eleIndex")  
            objArr[i].state = !objArr[i].state;
            localStorage.setItem("objname", objArr.map(item => JSON.stringify(item)).join(";"))
            $("#num").text(objArr.filter(item => !item.state).length)
        }

        // 事件委托
        function fun(event) {  
            // 未完成
            let leave = objArr.filter(item => !item.state)

            switch ($(event.target).text()) {
                case "所有":
                    apply()
                    break
                case "未完成":
                    apply(leave)
                    break
                case "已完成":
                    let over = objArr.filter(item => item.state)
                    apply(over)
                    break
                case "清除已完成":
                    objArr = leave
                    localStorage.setItem("objname", objArr.map(item => JSON.stringify(item)).join(";"))
                    apply()
                    break
            }
        }
    </script>
</body>

</html>